<template>
  <div class="al-bg-color-white
            al-width-100
            al-z-index-9999"
       :class="getShadow">

    <el-row class="al-flex-container-align-item-stretch">
      <el-col :span="5" class="al-flex-container-center-vh">
        <div class="">
          <img src="../../assets/pandalogo.png" alt="">
        </div>
      </el-col>

      <el-col :span="15" class="al-flex-container-center-v">
        <div class=" ">
          <el-menu
                  class="el-menu"
                  mode="horizontal"
                  active-text-color="#000000"
                  :default-active="activeNav"
                  @select="handleSelect">
            <el-menu-item
                    v-for="(item, index) in menuItemData"
                    :index="(index + 1).toString()"
                    :key="index"
                    @click="goPage(item.url)">
                            <span class="al-title-h2">
                                {{item.text}}
                            </span>
            </el-menu-item>

          </el-menu>
        </div>
      </el-col>

      <el-col :span="4" class="al-flex-container-center-vh">
        <div class="al-box-container ">
          <div class="al-flex-wrap " v-if="isLogin != true"
               style="height: 40px">
            <div class="l-register local-hover-register">
              <div @click="goPage('/register')"
                   class="al-cursor-pointer al-font-weight-100 al-flex-container-center-vh"
                   style="width: 90px; height: 40px">注 册
              </div>
            </div>

            <span class="al-box-size-20px"></span>

            <div class="l-login local-hover-login">
              <div @click="goPage('/login')"
                   class="al-cursor-pointer al-font-weight-100 al-flex-container-center-vh"
                   style="width: 90px; height: 40px">
                登 录
              </div>
            </div>
          </div>

          <div class="al-flex-container-center-vh" v-else>
            <div class="">
              <div @click="goPage('/user/profile/' + localUserInfo.id)">
                <img
                        class="al-box-radius-50 al-box-size-40px al-cursor-pointer"
                        :src="localUserInfo.avatar"/>
              </div>
            </div>

            <div>
              <span
                      @click="goPage('/user/profile/' + localUserInfo.id)"
                      class="al-p-10px al-cursor-pointer">
                  {{localUserInfo.username}}
              </span>
            </div>

            <div>
              <span> | </span>
            </div>

            <div class="">
              <div class="al-p-10px al-cursor-pointer" @click="logout()">退出</div>

            </div>
          </div>
        </div>

      </el-col>
    </el-row>

  </div>

</template>

<script>
  import store from "@/store";
  import {request} from "../../util/network/request";
  import {USER_LOGOUT} from "../../util/network/api/user/api-user";

  export default {
    name: "HeaderTop",
    components: {},
    props: {
      enableShadow: Boolean,
      logoUrl: String
    },

    data() {
      return {
        isLogin: false,
        activeNav: '',
        localUserInfo: {},
        menuItemData: [
          {
            text: '主页',
            url: '/index'
          },
          {
            text: '约拍',
            url: '/appointment/all'
          },
          {
            text: '作品',
            url: '/works/all'
          },
          {
            text: '打卡点',
            url: '/spot/all'
          },
          // {
          //   text: '活动',
          //   url: '/activity/all'
          // },
          {
            text: '搜索',
            url: '/search'
          }
        ]
      }
    },

    mounted() {
      this.activeNav = sessionStorage.getItem("activeNav");
      this.getLocalUserInfo();
    },

    computed: {
      getShadow: function () {
        return this.enableShadow ? 'al-box-shadow' : '';
      },
    },

    methods: {
      goPage: function (path) {
        this.gotoPage(path);
      },

      handleSelect(key, keyPath) {
        this.activeNav = keyPath[0];
        sessionStorage.setItem("activeNav", keyPath[0]);
      },

      logout() {
        request({
          url: USER_LOGOUT + '?username=' + this.$store.state.storeUserInfo.username,
          method: 'get',
          headers: {}
        }).then(res => {
          // console.log(res);
          localStorage.setItem("isLogin", "no");
          localStorage.removeItem("userinfo");
          this.localUserInfo = {};

          this.isLogin = false;
          this.$store.commit("setLoginState", false);

          this.goPage('/index')
        }).catch(err => {
          console.log(err);
          this.$message.info("未知错误，请稍候重试");
        })
      },

      getLocalUserInfo() {
        this.localUserInfo = JSON.parse(localStorage.getItem("userinfo"));
        this.isLogin = store.state.storeIsLogin;
        // console.log(this.localUserInfo);
      },


    }

  }
</script>

<style scoped>

  .el-menu {
    border-bottom: 0;
  }

  li.el-menu-item.is-active {
    border-bottom: 0;
  }

  .l-register {
    color: #a1c4fd;
    border-radius: 999em;
    border: 1px solid #a1c4fd;
  }

  .local-hover-register:hover {
    border-radius: 999em;
    color: white;
    background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
    border: none;
  }

  .l-login {
    color: #4facfe;
    border-radius: 999em;
    border: 1px solid #4facfe;
  }

  .local-hover-login:hover {
    border-radius: 999em;
    color: white;
    background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
    border: none;
  }


</style>
